<template>
  <el-card style="margin: 20px">
    <div slot="header">
       <div v-if="add">试题录入</div>
      <div v-else-if="edit">试题修改</div>
    </div>
    <!-- <el-divider></el-divider> -->
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :data="form"
      :rules="rules"
      ref="formRef"
    >
      <el-form-item label="学科:" prop="subjectID">
        <el-select
          placeholder="请选择"
          v-model="form.subjectID"
          @change="handelSubject"
          style="width: 400px"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录:" prop="catalogID">
        <el-select
          placeholder="请选择"
          v-model="form.catalogID"
          style="width: 400px"
          @change="handelCatalog"
        >
          <el-option
            v-for="item in catalogList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业:" prop="enterpriseID">
        <el-select
          placeholder="请选择"
          v-model="form.enterpriseID"
          style="width: 400px"
        >
          <el-option
            v-for="(item,index) in newArr"
            :key="index"
            :label="item.enterprise"
            :value="item.enterpriseID"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市:" prop="province" width="400px">
        <el-select
          placeholder="请选择"
          v-model="form.province"
          @change="handelCity"
          style="width: 190px"
        >
          <el-option
            v-for="item in province"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
        <el-select
          placeholder="请选择"
          collapse-tags
          style="width: 190px; margin-left: 20px"
          v-model="form.city"
        >
          <el-option
            v-for="(item,index) in city"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向:" prop="direction">
        <el-select
          placeholder="请选择"
          v-model="form.direction"
          style="width: 400px"
        >
          <el-option
            v-for="(item,index) in directionList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题型:" prop="questionType" style="width: 400px">
        <el-radio-group v-model="form.questionType">
          <el-radio
            v-for="(item,index) in questionTypeList"
            :key="index"
            :value="item.value"
            :label="item.value"
            >{{item.label}}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度:" prop="difficulty" style="width: 400px">
        <!-- <el-radio v-model="form.difficulty"></el-radio> -->
        <el-radio-group v-model="form.difficulty">
          <el-radio
            v-for="(item,index) in difficultyList"
            :key="index"
            :value="item.value"
            :label="item.value"
            >{{item.label}}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题干:" prop="question">
          <quillEditor
          style="width: 100%;margin-top: 15px"
            v-model="form.question"
             :options="editorOption"
            @blur="$refs.formRef.validateField('question')"
          ></quillEditor>
      </el-form-item>
      <!-- 单选 -->
      <template v-if="this.form.questionType ==='1'">
        <div>
          <el-row>
            <el-col>
              <el-form-item label-width="100px" label="选项:">
                <el-row  class="duoxuan" v-for="(item,index) in form.options" :key="index">
                  <el-col :span="1">
                    <el-radio-group v-model="radio">
                      <el-radio :label="item.code" v-model="item.isRight">{{item.code}}</el-radio>
                    </el-radio-group>
                  </el-col>
                  <el-col :span="5"> <el-input v-model="item.title"></el-input></el-col>
                  <el-col :span="10">
                    <el-upload
                      class="upload-demo"
                      action="#"
                      multiple
                      :limit="3"
                    >
                      <el-button class="upload_btn">上传图片</el-button>
                      <i class="el-icon-circle-close"></i>
                    </el-upload>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col>
            <el-button class="add_btn" type="danger" size="small" disabled
              >+增加选项与答案</el-button
            >
          </el-col>
        </el-row>
      </template>
      <!-- 多选 -->
        <template v-else-if="this.form.questionType ==='2'">
        <div >
          <el-row>
            <el-col>
              <el-form-item label-width="100px" label="选项:">
                <el-row v-for="(item, index) in form.options" :key="index" class="duoxuan">
                  <el-col :span="1">
                    <el-checkbox :label="item.code" v-model="item.isRight">{{item.code}}</el-checkbox>
                  </el-col>
                  <el-col :span="5"> <el-input v-model="item.title"></el-input></el-col>
                  <el-col :span="10">
                    <el-upload
                      class="upload-demo"
                      action="#"
                      multiple
                      :limit="3"
                    >
                      <el-button class="upload_btn">上传图片</el-button>
                      <i class="el-icon-circle-close"></i>
                    </el-upload>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col>
            <el-button class="add_btn" type="danger" size="small" @click="handelAdd"
              >+增加选项与答案</el-button
            >
          </el-col>
        </el-row>
      </template>
      <!-- 简答 -->
      <el-form-item label="解析视频:" style="width: 400px">
        <el-input v-model="form.videoURL"></el-input>
      </el-form-item>
      <el-form-item label="答案解析:" prop="question">
        <quillEditor
          style="width: 100%;margin-top: 15px"
            v-model="form.answer"
            :options="editorOption"
             @blur="$refs.formRef.validateField('question')"
          ></quillEditor>
      </el-form-item>
      <el-form-item label="题目备注:" >
        <el-input type="textarea" style="width: 400px" v-model="form.remarks"></el-input>
      </el-form-item>
      <el-form-item label="试题标签:" >
        <el-select  placeholder="请选择" style="width: 400px" v-model="form.tags">
          <el-option
          v-for="(item,index) in tagsList"
              :key="index"
              :label="item.label"
              :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="handelAddList" v-if="add">确认提交 </el-button>
         <el-button type="primary"  @click="handelAddList1" v-else-if="edit">确认修改 </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { list, add, update, detail } from '@/api/hmmm/questions'
import { simpleList } from '@/api/hmmm/subjects'
import { mlSimple } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { tagsSimple } from '@/api/hmmm/tags'
// import { CompanyList } from '@/api/hmmm/companys'

export default {
  components: {
    quillEditor
  },

  data () {
    return {
      add: true,
      edit: false,
      labelPosition: 'right',
      // 富文本编辑器配置
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image'] // 上传图片、上传视频
          ]
        }
      },
      params: {
        page: 1,
        pagesize: null
      },
      formData: [],
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        videoURL: '',
        answer: '',
        remarks: '',
        tags: '',
        options: [
          { code: 'A', isRight: false, img: '', title: '' },
          { code: 'B', isRight: false, img: '', title: '' },
          { code: 'C', isRight: false, img: '', title: '' },
          { code: 'D', isRight: false, img: '', title: '' }
        ]
      },
      subjectList: [],
      catalogList: [],
      companyList: [],
      province: [],
      city: [],
      questionTypeList: [],
      difficultyList: [],
      directionList: [],
      tagsList: [],
      rodio1: 1,
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '请选择公司', trigger: 'blur' }],
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [{ required: true, message: '请选择', trigger: 'blur' }],
        difficulty: [{ required: true, message: '请选择', trigger: 'blur' }],

        question: [{ required: true, message: '请选择题干', trigger: 'blur' }]
        // answer: [{ required: true, message: '请选择答案', trigger: 'blur' }]
      },
      newArr: [{}],
      pagesize: 10000,
      listArr:
   [{ name: 'A', done: false, url: '', value: '' },
     { name: 'B', done: true, url: '', value: '' },
     { name: 'C', done: true, url: '', value: '' },
     { name: 'D', done: true, url: '', value: '' }
   ], // 单选
      a: 0,
      str: 'D',
      radio: '',
      row: {}
    }
  },
  created () {
    this.getList()
    this.getSimpleList()
    this.province = provinces()
    this.directionList = direction
    this.questionTypeList = questionType
    this.difficultyList = difficulty
  },
  mounted () {
    this.showInfo()
  },
  methods: {
    async showInfo () {
      if (!this.$route.query.id) {
        this.add = true
        this.edit = false
        console.log(this.add)
        console.log(this.edit)
      } else {
        this.add = false
        this.edit = true
        const res = await detail({ id: this.$route.query.id })
        this.form = res.data
        this.form.options = res.data.options
        console.log(res)
        console.log(this.form)
      }
    },

    // 失去焦点事件
    // onEditorBlur (quill) {
    //   console.log('editor blur!', quill)
    // },
    // 获得焦点事件
    // onEditorFocus (quill) {
    //   console.log('editor focus!', quill)
    // },
    // 准备富文本编辑器
    // onEditorReady (quill) {
    //   console.log('editor ready!', quill)
    // },
    // 内容改变事件
    // onEditorChange ({ quill, html, text }) {
    //   console.log('editor change!', quill, html, text)
    //   if (this.form.question) {
    //     this.form.question = html
    //   } else {
    //     this.form.answer = html
    //   }
    // },
    async getList () {
      const { data } = await list(this.pagesize)
      console.log(data)
      this.newArr = data.items
      console.log(this.newArr)
      // console.log(this.newArr)
      // let str = ''
      // data.items.forEach((item) => {
      //   str += item.enterprise + ','
      // })
      // str = str.substring(0, str.length - 1)
      // this.newArr = str.split(',')
      // this.newArr = this.newArr.filter((item) => item !== 'null')
      // console.log(this.newArr)
    },
    async getSimpleList () {
      const res = await simpleList()
      // console.log(res)
      this.subjectList = [...new Set(res.data)]
    },
    async handelSubject () {
      const res = await mlSimple(this.params)
      this.catalogList = res.data
    },
    handelCity () {
      // console.log(this.form)
      this.city = citys(this.form.province)
      // console.log(this.city)
    },
    handelAdd () {
      const obj = {
        code: '',
        isRight: false,
        img: '',
        title: ''
      }
      this.a += 1
      const num = String.fromCharCode(this.str.charCodeAt() + this.a)
      obj.code = num
      this.form.options.push(obj)
    },
    async handelCatalog () {
      const res = await tagsSimple()
      this.tagsList = res.data
    },
    async handelAddList () {
      console.log(this.form, '1234')
      try {
        console.log(this.form.questionType)

        const res = await add(this.form)
        console.log(res)
        this.getList()
        this.form = {}
      } catch (error) {
        console.dir(error)
      }
    },
    async handelAddList1 () {
      console.log(this.form.options)
      const res = await update(this.form)
      console.log(res)
      this.$router.go(-1)
      this.form = {}
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.ql-editor {
  width: 400px;
}
/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}
::v-deep(.ql-container.ql-snow) {
  height: 200px;
}
.upload-demo {
  margin-left: 10px;
  margin-top: -10px;
}

.upload-demo {
  .upload_btn {
    position: relative;
    width: 100px;
    height: 60px;
    border: 1px dashed #ccc;
  }
  i {
    position: absolute;
    right: 750px;
    top: -18px;
    background: #fff;
    font-size: 18px;
    color: #999;
  }
}
.add_btn {
  margin-left: 100px;
  margin-bottom: 20px;
}
.duoxuan {
  margin-top: 30px;
}
</style>
